<template>
  <div class="assessmentIndex">
    <c-title :hide="false" text="测评"></c-title>
    <div class="categorize">
      <div class="cateTitle">{{info.first_cat_name}}</div>
      <div class="classList">
        <div class="lis" :class="[first_cat_id == item.id ? 'sel' : '']" v-for="(item, index) in first_cat_list" :key="index" @click="tapClass(item, 'first')">{{ item.name }}</div>
      </div>
    </div>
    <div class="categorize">
      <div class="cateTitle">{{info.second_cat_name}}</div>
      <div class="classList">
        <div class="lis" :class="[second_cat_id == item.id ? 'sel' : '']" v-for="(item, index) in second_cat_list" :key="index" @click="tapClass(item, 'second')">{{ item.name }}</div>
      </div>
    </div>
    <div class="categorize">
      <div class="cateTitle">{{info.third_cat_name}}</div>
      <div class="classList">
        <div class="lis" :class="[third_cat_id == item.id ? 'sel' : '']" v-for="(item, index) in third_cat_list" :key="index" @click="tapClass(item, 'third')">{{ item.name }}</div>
      </div>
    </div>
    <div class="recordbtn" @click="toRecord">历史记录</div>
    <div class="btn" @click="toQuestionnaire">进行测评</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      first_cat_list: [],
      second_cat_list: [],
      third_cat_list: [],
      first_cat_id: null,
      second_cat_id: null,
      third_cat_id: null,
      postLoading: false,
      info:[]
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == "payBack") {
      this.$router.push(this.fun.getUrl("member", {}));
      next(false);
    } else {
      next();
    }
  },
  methods: {
    init() {
      this.first_cat_id = null;
      this.second_cat_id = null;
      this.third_cat_id = null;
      this.info = [];
    },
    tapClass(item, key) {
      if (this.postLoading) {
        this.$toast("请求中请稍后");
        return;
      }
      if (key == "first") {
        this.first_cat_id = item.id;
      } else if (key == "second") {
        this.second_cat_id = item.id;
      } else {
        this.third_cat_id = item.id;
      }
      this.getData();
    },
    toRecord() {
      this.$router.push(this.fun.getUrl("assessment_questionnaire_record", {}));
    },
    toQuestionnaire() {
      if (!this.third_cat_id || !this.second_cat_id || !this.first_cat_id) {
        this.$toast("请先选择分类");
        return;
      }
      this.$router.push(this.fun.getUrl("assessment_questionnaire", { id: this.third_cat_id }));
    },
    getData() {
      this.postLoading = true;
      let json = {};
      if (this.first_cat_id) {
        json.first_cat_id = this.first_cat_id;
      }
      if (this.second_cat_id) {
        json.second_cat_id = this.second_cat_id;
      }
      if (this.third_cat_id) {
        json.third_cat_id = this.third_cat_id;
      }
      $http
        .post("plugin.assessment.frontend.question.categoryList", json, "")
        .then(response => {
          this.postLoading = false;
          if (response.result === 1) {
            this.first_cat_list = response.data.first_cat_list;
            this.second_cat_list = response.data.second_cat_list;
            this.third_cat_list = response.data.third_cat_list;
            this.first_cat_id = response.data.first_cat_id;
            this.second_cat_id = response.data.second_cat_id;
            this.third_cat_id = response.data.third_cat_id;
            this.info = response.data;
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(error => {
          this.postLoading = false;
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.assessmentIndex {
  overflow: hidden;
  padding-bottom:3rem;
  .recordbtn {
    position: fixed;
    right: 0.63rem;
    bottom: 11.28rem;
    width: 2.75rem;
    height: 2.75rem;
    background: #494949;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn {
    position: fixed;
    bottom: 0.94rem;
    left: 1.53rem;
    width: 20.38rem;
    height: 2.5rem;
    background: #f15353;
    border-radius: 1.25rem;
    color: #ffffff;
    text-align: center;
    line-height: 2.5rem;
  }
  .categorize {
    margin: 0.63rem 0.75rem;
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 1.25rem 0.97rem;
    box-sizing: border-box;
    .cateTitle {
      font-size: 0.94rem;
      font-weight: bold;
      color: #00001c;
      margin-bottom: 1.28rem;
      text-align: left;
    }
    .classList {
      display: flex;
      flex-wrap: wrap;
      .lis {
        padding: 0.5rem 0.84rem;
        box-sizing: border-box;
        background: #f8f8f8;
        border-radius: 0.38rem;
        margin-right: 0.7rem;
        text-align: center;
        margin-bottom: 0.75rem;
      }
      .sel {
        background: #feeded;
        border: 0.03rem solid #f15353;
        color: #f15353;
      }
    }
  }
}
</style>
